<template>
  <div class="search">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{ name }}酒店预定</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-col :span="5">
        <el-autocomplete
          v-model="city"
          :fetch-suggestions="loadCityList"
          placeholder="切换城市"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="-"
          unlink-panels
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <el-popover placement="bottom-start" width="300" v-model="visible">
          <div class="man">
            <span class="every">每间</span>
            <el-select
              v-model="adult"
              slot="prepend"
              placeholder="2 成人"
              size="mini"
              class="selectbox"
            >
              <el-option
                v-for="(item, index) in manList"
                :key="index"
                :label="`${item} 成人`"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="children"
              slot="prepend"
              placeholder="0 儿童"
              size="mini"
              class="selectbox"
            >
              <el-option
                v-for="(item, index) in manList"
                :key="index"
                :label="`${item}儿童 `"
                :value="item"
              >
              </el-option>
            </el-select>

            <div class="line"></div>
            <div class="botton" @click="sure">
              <el-button type="primary" size="mini">確定</el-button>
            </div>
          </div>
          <el-input
            placeholder="人数未定"
            suffix-icon="el-icon-user"
            v-model="man"
            slot="reference"
          >
          </el-input>
        </el-popover>
      </el-col>
      <el-button type="primary" @click="sendInfo">查看价格</el-button>
    </el-row>

    <el-row>
      <el-col :span="14">
        <el-row type="flex">
          <span class="title">区域:</span>
          <div class="box-r-f1">
            <el-col :class="{ area: !isShowPlace }">
              <span v-for="(item, index) in scenics" :key="index" class="place">
                {{ item.name }}
              </span>
            </el-col>
            <div @click="showPlace">
              <span
                class="ifontcont"
                :class="{
                  'el-icon-arrow-down': !isShowPlace,
                  'el-icon-arrow-up': isShowPlace,
                }"
              ></span>
              等29个区域
            </div>
          </div>
        </el-row>
        <el-row type="flex">
          <span class="title"
            >均价
            <span
              class="el-icon-question"
              title="等级均价由平日计算得出,节假日价格会有所上浮"
            ></span
            >:
          </span>
          <div
            class="box-r-f1"
            title="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
          >
            <el-col :span="6">
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span>¥332</span>
            </el-col>
            <el-col
              :span="7"
              title="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
            >
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span>¥521</span>
            </el-col>
            <el-col
              :span="8"
              title="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
            >
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span class="iconfont iconhuangguan"></span>
              <span>¥768</span>
            </el-col>
          </div>
        </el-row>
      </el-col>
      <el-col :span="10">
        <div id="container" v-loading="isload"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["locationList", "isload"],
  data() {
    return {
      city: "广州市",
      name: "广州市",
      value1: "",
      man: "",
      scenics: [],
      manList: [0, 1, 2, 3, 4, 5, 6],
      adult: "",
      children: "",
      isShowPlace: false,
      pickerOptions: {
        disabledDate: this.disabledDate,
      },
      //   positionList: [
      //     { x: 113.372701, y: 23.131121 },
      //     { x: 113.369955, y: 23.124491 },
      //     { x: 113.3715, y: 23.131121 },
      //   ],
      markerList: [],
      visible: false,
      form: {
        city: "",
        enterTime: "",
        leftTime: "",
      },
      mapobj: "",
      markerList: [],
      loading1: true,
    };
  },
  created() {
    this.sendInfo();
  },
  watch: {
    locationList() {
      if (!this.mapobj) {
        console.log(this.locationList);
        this.mapload(this.locationList);
      } else {
        this.maplocation(this.locationList);
      }
      this.loading1 = false;
    },
  },
  mounted() {
    // window.onLoad=()=>{
    //     var map =new AMap.Map('container',{
    //         zoom:12,
    //     })
    //     var marker = new AMap.Marker({
    // });
    //  this.mapobj=map
    // }
    // var url = 'https://webapi.amap.com/maps?v=1.4.15&key=bc4864ab1f554c8656f1da7b1abfb2c2&callback=onLoad';
    //   var jsapi = document.createElement('script');
    //   jsapi.charset = 'utf-8';
    //   jsapi.src = url;
    //    document.head.appendChild(jsapi);
  },

  methods: {
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
    },
    sure() {
      this.visible = !this.visible;
      this.man = `${this.adult}成人 ${this.children}儿童`;
    },
    mapload(positionList) {
      window.onLoad = () => {
        var map = new AMap.Map("container", {
          zoom: 15,
          center: [positionList[0].longitude, positionList[0].latitude],
        });

        const markerList = positionList.map((item, index) => {
          return new AMap.Marker({
            // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (index + 1) + '.png',
            icon:
              "https://webapi.amap.com/theme/v1.3/markers/n/mark_b" +
              (index + 1) +
              ".png",
            // icon:'//vdata.amap.com/icons/b18/1/2.png',
            position: new AMap.LngLat(item.longitude, item.latitude),
            title: item.name,
          });
        });
        map.add(markerList);
        this.mapobj = map;
        this.markerList = markerList;
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=bc4864ab1f554c8656f1da7b1abfb2c2&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },

    maplocation(positionList) {
      const map = this.mapobj;

      const markerList = positionList.map((item, index) => {
        return new AMap.Marker({
          // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (index + 1) + '.png',
          icon:
            "https://webapi.amap.com/theme/v1.3/markers/n/mark_b" +
            (index + 1) +
            ".png",
          position: new AMap.LngLat(item.longitude, item.latitude),
          title: item.name,
        });
      });
      map.remove(this.markerList);
      map.add(markerList);
      if (positionList != 0) {
        map.setCenter([positionList[0].longitude, positionList[0].latitude]);
      }

      this.markerList = markerList;
    },
    sendInfo() {
      this.loading1 = true;
      this.$axios({
        url: "/cities",
        params: {
          name: this.city,
        },
      }).then((res) => {
        // console.log(res);
        this.scenics = res.data.data[0].scenics;
        this.form.city = res.data.data[0].id;

        this.$emit("searchData", this.form);
      });
    },
    loadCityList(queryString, showList) {
      if (!queryString) {
        showList([
          {
            value: "请输入城市名字",
          },
        ]);
        return;
      }
      this.$axios({
        url: "/cities",
        params: {
          name: queryString,
        },
      }).then((res) => {
        const data = res.data.data
          .filter((city) => {
            return city.sort;
          })
          .map((city) => {
            return {
              ...city,
              value: city.name,
            };
          });
        // console.log(data);
        showList(data);
      });
    },
    handleSelect(item) {
      this.city = item.name;
      this.name = item.name;
      this.sendInfo();
    },
    showPlace() {
      this.isShowPlace = !this.isShowPlace;
    },
    addPosition() {},
  },
};
</script>
<style lang='less' scoped>
.search {
  /deep/.el-input__inner {
    width: 100%;
  }
  .area {
    height: 48px;
    overflow: hidden;
  }
  .title {
    width: 100px;
  }
  .place {
    padding-right: 10px;
    font-size: 14px;
    color: #666666;
  }
  .el-icon-question {
    font-size: 16px;
    color: #cccccc;
  }
  .box-r-f1 {
    flex: 1;
  }
  .iconhuangguan {
    color: #ff9900;
  }
  #container {
    width: 100%;
    height: 300px;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  padding-right: 12px;
}
.man {
  height: 90px;
  .selectbox {
    width: 100px;
  }
  .line {
    width: 100%;
    height: 1px;
    border-top: 1px solid #dddddd;

    margin-top: 20px;
  }
  .every {
    display: inline-block;
    width: 80px;
  }
  .botton {
    padding: 15px;
    text-align: right;
  }
}
</style>